import React, { Component } from "react";
import Unit from "../../unit";
class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      curCls: 1,
      curCls2: 1,
      // list: [],
      ajaxCfg: {
        url: "api/userinfo",
        cfg: {
          page: 1,
          pageSize: 100,
        },
        headers: {},
      },
    };
  }
  // http://api.bdplus.cn/api/userinfo?page=1&pageSize=100  get   查看
  getList = () => {
    const { ajaxCfg } = this.state;
    Unit.getApi(ajaxCfg).then((res) => {
      console.log(res.data.msg);
    });
  };
  componentDidMount = () => {
    this.getList();
  };
  tabFn = (e, index) => {
    this.setState({
      curCls: index,
    });
  };
  ulFn = (e) => {
    let index = e.target.getAttribute("data-index");
    // console.log(index);
    // let index3 = e.target.getAttribute("_index");
    // let index2 = e.target.dataset.index;
    this.setState({
      curCls2: Number(index),
    });
  };
  render() {
    const { curCls, curCls2 } = this.state;
    return (
      <React.Fragment>
        <div className="tab">
          <ul className="tab_btn clearfix">
            <li
              onClick={(e) => {
                this.tabFn(e, 1);
              }}
              className={curCls === 1 ? "cur" : ""}
            >
              菜单一
            </li>
            <li
              onClick={(e) => {
                this.tabFn(e, 2);
              }}
              className={curCls === 2 ? "cur" : ""}
            >
              菜单二
            </li>
            <li
              onClick={(e) => {
                this.tabFn(e, 3);
              }}
              className={curCls === 3 ? "cur" : ""}
            >
              菜单三
            </li>
          </ul>
          <ol className="tab_list">
            <li className={curCls === 1 ? "cur" : ""}>板块一</li>
            <li className={curCls === 2 ? "cur" : ""}>板块二</li>
            <li className={curCls === 3 ? "cur" : ""}>板块三</li>
          </ol>
        </div>
        <div className="tab">
          <ul
            className="tab_btn clearfix"
            onClick={(e) => {
              this.ulFn(e);
            }}
          >
            <li
              data-index="1"
              _index="1"
              className={curCls2 === 1 ? "cur" : ""}
            >
              菜单一
            </li>
            <li
              data-index="2"
              _index="2"
              className={curCls2 === 2 ? "cur" : ""}
            >
              菜单二
            </li>
            <li
              data-index="3"
              _index="3"
              className={curCls2 === 3 ? "cur" : ""}
            >
              菜单三
            </li>
          </ul>
          <ol className="tab_list">
            <li className={curCls2 === 1 ? "cur" : ""}>板块一</li>
            <li className={curCls2 === 2 ? "cur" : ""}>板块二</li>
            <li className={curCls2 === 3 ? "cur" : ""}>板块三</li>
          </ol>
        </div>
      </React.Fragment>
    );
  }
}

export default index;
